@include('Home.head')
<style type="text/css">
    .find-font-store
    {
        font-size: 13px;
        color: #5db95d;
    }
    #store_keyword_btn
    {
        width: 70px;
        height: 35px;
        margin-left: 5%;
        text-align: center;
        border: none;
        outline: none;
        border-radius: 5px;
        background: #5cb95c;
        color: #fff;
        margin-top: 1%;
    }
    #store_keyword
    {
        width: 72%;
        float: left;
    }

    #district2
    {

        display: block;
        width: 100%;
        padding: .625em;
        font-size: 1.6rem;
        line-height: 1.2;
        color: #555;
        vertical-align: middle;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-appearance: none;
        -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    #payTypeCheck
    {

        display: block;
        width: 100%;
        padding: .625em;
        font-size: 1.6rem;
        line-height: 1.2;
        color: #555;
        vertical-align: middle;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-appearance: none;
        -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }


    .am-checkbox-inline{
        float: right;
        margin-right: -158px;
        color: #dd514b;
        margin-top: 11px;
    }
    .clothes-div
    {
        overflow:hidden;
        display: inline-block;
        margin: 5px;
    }
    .am-btn.am-btn-default.specs
    {
        float: left;
        margin-right: 3%;
        width: 65px;
        height: 40px;
        border-radius: 5px;
        color: #fff;
        background: #919891;
        text-align: center;
        margin-top: 1%;
        margin-bottom: 1%;
        outline: none;
    }
    .specs-p
    {
        margin-top: 5%;
    }
</style>
<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
        <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">注册会员</a></li>
        </ol>
    </div>
    <div class="cart-panel">

      <!--  <div class="withdrawals-panel">
            选择报单类型：
            <div class="form-group">
                <select class="form-control" id="payTypeCheck" @change="selectOn">
                    <option value="-1">点击选择报单类型</option>
                    {{--<option  value="1" >冷敷贴,百草液系列</option>--}}
                    {{-- <option  value="1" >百草液系列</option>--}}
                    {{--<option  value="2" >DT塑形内衣系列</option>--}}
                    <option v-for="(val,key) in goodsData" :value="key" >@{{ val.goodsname }}</option>
                </select>
				<input type="text" id="payTypeCheck" value="报单类型" class="am-form-field txt-qty am-text-center am-text-sm">
            </div>
        </div> -->
        {{--<div class="my-search-title-panel" id="goods_xq" style="display:none" onclick="see()">--}}
            {{--<a href="javascript:void(0)" style="display: flex;flex-direction: column;align-items: center;" id="goods_xq_a">△△查看商品详情△△</a>--}}
        {{--</div>--}}
        <div data-tab-panel-0 class="am-tab-panel am-active" v-html="goodsDetails.spec" style="display:none" id="goods_spec"></div>

        {{--<div class="my-search-title-panel" id="stick_liquid_type" style="display:none;" >--}}
        {{--<p class="my-search-titp-p am-text-sm bold">冷敷贴</p>--}}
        {{--<!-- <p class="my-search-titp-p am-text-sm bold">百草液</p> -->--}}
        {{--<div style="overflow:hidden">--}}
        {{--<form class="am-form-inline" role="form">--}}
        {{--<button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickMinus()"><i class="am-icon-minus"></i></button>--}}
        {{--<input type="number" name="txtQty" v-model="user.stick" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">--}}
        {{--<button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickAdd()"><i class="am-icon-plus"></i></button>--}}
        {{--</form>--}}
        {{--</div>--}}
        {{--<p class="my-search-titp-p am-text-sm bold">百草液</p>--}}
        {{--<div style="overflow:hidden">--}}
        {{--<form class="am-form-inline" role="form">--}}
        {{--<button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidMinus()" ><i class="am-icon-minus"></i></button>--}}
        {{--<input type="number" name="txtQty" v-model="user.liquid"  disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">--}}
        {{--<button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidAdd()"><i class="am-icon-plus"></i></button>--}}
        {{--</form>--}}
        {{--</div>--}}
        {{--</div>--}}

        <div class="my-search-title-panel" id="clothes_type" style="display:none;" >
            <div class="first-each-div" v-for="v,i in specsList" >
                <p class="my-search-titp-p am-text-sm bold specs-p">@{{ v.name }}</p>
                <div v-for="val,index in specsLists" >
                    <div v-if = "val.specs_id == v.id"  class="you specs" >
                        <div class="clothes-div" v-for="j,m in val.vals">
                            <button type="button" class="am-btn am-btn-default specs" checkSpecs="2" v-on:click="checkedSpecs( j.id )"  :id="'specs-btnss'+j.id">@{{ j.val }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="withdrawals-panel" style="display:none">
            关键字：<font class="find-font-store">[ 门店名称,申请人姓名,联系电话,省,市,区 ]</font>
            <span class="red2">
                <input type="text"  class="am-form-field am-radius" placeholder="请输入门店关键字(选填)" id="store_keyword">
                <button id="store_keyword_btn" onclick="storeFind()" type="button">确认搜索</button>
            </span>
        </div>
        <div class="withdrawals-panel" style="display:none">
            选择门店：
            <div class="form-group">
                <select class="form-control" id="district2" onchange="changeStores1(this.value)">
                    <option>点击选择更多门店</option>
                    <!-- <option v-for="val in stores1" v-bind:value="val.number" >@{{ val.number }}</option> -->
                </select>
            </div>
        </div>
        <div class="withdrawals-panel" style="display:none">
            填写门店：
            <span class="red2">
                <input type="text"  v-model="user.stores_number" class="am-form-field am-radius" placeholder="输入门店编号">
            </span>
        </div>

        <div class="withdrawals-panel"><span class=" red2">*</span>分享人：@{{ referrer }}<span class="red2"><input type="number" pattern="[0-9]*" v-model="user.referrer" v-on:blur="upperCase()" class="am-form-field am-radius" placeholder="分享人电话"></span></div>
        {{--</div>--}}
        <div class="am-form-group am-form-icon">
            <i class="am-icon-user" style="color:#329cd9"></i>
            <input type="text" class="am-form-field  my-radius" v-model="user.name" placeholder="联系人名称">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-phone" style="color:#f09513"></i>
            <input type="number" pattern="[0-9]*" class="am-form-field  my-radius" v-model="user.phone" placeholder="请输入联系电话">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-lock" ></i>
            <input type="password" class="am-form-field  my-radius" v-model="user.password" placeholder="登录密码 默认联系电话">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-lock" ></i>
            <input type="password" class="am-form-field  my-radius" v-model="user.password_pay" placeholder="支付密码 默认联系电话">
        </div>
        <div class="paoduct-title-panel">
            <p style="width: 50%;"><i class="am-icon-location-arrow"></i> 收货地址
                <label class="am-checkbox-inline">
                    <input type="checkbox"  v-model="user.pick"  value="" data-am-ucheck  onclick="checkboxOnclick(this)" id="is_pick" > 自提
                </label>
            </p>
            <form class="am-form am-form-inline">
                <p>
                <div data-toggle="distpicker">
                    <label class="sr-only" for="province1">省/直辖市</label>
                    <select id="province1" v-model="user.province" required>
                    </select>
                    <div class="form-group">
                        <label for="city1">城市</label>
                        <select class="form-control" id="city1" v-model="user.city" required>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district1" >区/县</label>
                        <select class="form-control" id="district1" v-model="user.district">
                        </select>
                    </div>
                </div>
                </p>
                <div class="am-form-group">
                    <input type="text" v-model="user.address" class="am-form-field am-radius" placeholder="详细地址">
                </div>
            </form>
        </div>

        <!-- <div class="withdrawals-panel">
            启动金:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="payType" type="radio" v-model="payType" value="1" />是 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="payType" type="radio" v-model="payType" value="2" />否
        </div> -->

        {{--<div class="am-checkbox">--}}
        {{--<label>--}}
        {{--<input type="checkbox"> 我已阅读并同意<a href="#">《协议》</a>--}}
        {{--</label>--}}
        {{--</div>--}}
        <p class="am-text-center"><button type="button" v-if="status == 0" v-on:click="add()" class="am-btn am-btn-danger am-radius" style="border-radius: 50px;width: 100%;">立即注册</button></p>
        <p class="am-text-center"><button type="button" v-if="status == 1" class="am-btn am-btn-danger am-radius" disabled="disabled">注册中..</button></p>
    </div>
    <!--底部-->
    @include('Home.foot')
</div>
<div id="allmap" style="display: none;"></div>
<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
        src="https://apis.map.qq.com/tools/geolocation?key=Y3JBZ-XWBKP-6GLDC-LDO4W-BH4WV-WMFI3&referer=baoli">
</iframe>
</body>

<script src="{{ URL::asset('js/address/distpicker.data.js') }}"></script>
<script src="{{ URL::asset('js/address/distpicker.js') }}"></script>
<script src="{{ URL::asset('js/address/main.js') }}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N&v"></script>
<script type="text/JavaScript">

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            //var latitudes = r.point.lng+','+r.point.lat;
            //app.latitudes = latitudes;
            var data={
                location:r.point.lat+','+r.point.lng,
                key:"Y3JBZ-XWBKP-6GLDC-LDO4W-BH4WV-WMFI3",
                get_poi:0
            }
            var url="http://apis.map.qq.com/ws/geocoder/v1/?";
            data.output="jsonp";
            $.ajax({
                type:"get",
                dataType:'jsonp',
                data:data,
                jsonp:"callback",
                jsonpCallback:"QQmap",
                url:url,
                success:function(json){
                    if ( json.message == 'query ok' && json.status == 0 ) {
                        app.user_city = json.result.ad_info.city;
                        //alert(app.user_city)
                    } else {
                        layer.msg("当前用户市查询失败!");
                        return false;
                    }
                },
                error : function(err){
                    layer.msg("服务端错误，请刷新浏览器后重试");
                    return false;
                }

            })
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})


    // function payTypeCheck( val )
    // {
    //     console.log(val);
    //     if ( val >= 1 ) {
    //         $("#stick_liquid_type").show();
    //         $("#clothes_type").hide();
    //         app.payTypesChecked = 1;
    //     } else if( val == 18 ){
    //         $("#stick_liquid_type").hide();
    //         $("#clothes_type").show();
    //         app.payTypesChecked = 2;
    //     } else {
    //         $("#stick_liquid_type").hide();
    //         $("#clothes_type").hide();
    //         app.payTypesChecked = 0;
    //     }
    //     app.goodsId=val;
    // }



    function checkedSpecs(e)
    {
        var checkSpecs = $("#specs-btnss"+e).attr( "checkSpecs" );
        if ( checkSpecs == 1 ) {
            $("#specs-btnss"+e).attr( "checkSpecs", 2 );
            $("#specs-btnss"+e).css("background","#919891");
        } else {
            $("#specs-btnss"+e).attr( "checkSpecs", 1 );
            $("#specs-btnss"+e).css("background","#5bb95b");
            $("#specs-btnss"+e).parent('.clothes-div').siblings('').find('button').attr( "checkSpecs", 2 );
            $("#specs-btnss"+e).parent('.clothes-div').siblings('').find('button').css("background","#919891");
        }
    }





    function changeStores1( a )
    {
        app.user.stores_number = a;
    }


    function checkboxOnclick(checkbox){
        if ( checkbox.checked == true && app.user.stores_number == "" ){
            $("#is_pick").prop("checked",false);
            layer.msg("未绑定门店编号不能勾选自提!");
            return false;
        }
    }


    function findStoreInfo( number, specs, specslength, Checklength )
    {
        numbers = number.split(',');
        var data={
            location:numbers[1]+','+numbers[0],
            key:"Y3JBZ-XWBKP-6GLDC-LDO4W-BH4WV-WMFI3",
            get_poi:0
        }
        var url="http://apis.map.qq.com/ws/geocoder/v1/?";
        data.output="jsonp";
        $.ajax({
            type:"get",
            dataType:'jsonp',
            data:data,
            jsonp:"callback",
            jsonpCallback:"QQmap",
            url:url,
            success:function(json){
                if ( json.message == 'query ok' && json.status == 0 ) {
                    if ( app.user_city != json.result.ad_info.city ) {
                        alert(app.user_city);
                        alert(json.result.ad_info.city);
                        layer.msg("门店绑定不能跨市!");
                        return false;
                    } else {
                        app.adds( specs, specslength, Checklength );
                    }
                } else {
                    layer.msg("绑定门店所在市查询失败!");
                    return false;
                }
            },
            error : function(err){
                layer.msg("服务端错误，请刷新浏览器后重试");
                return false;
            }

        })
    }




    function storeFind()
    {
        var store_keyword = $('#store_keyword').val();
        if ( store_keyword == '' ) {
            layer.msg('请输入门店关键字');
            return false;
        }
        $.post("/home/stores/stores",{'_token':'{{csrf_token()}}',class:'stores_finds',store_keyword:store_keyword },function (res) {
            if (res.code) {
                layer.msg('搜索成功,请在下方选择你想要的门店',{time:1500},function () {
                    $("#district2").html("");
                    $("#district2").append("<option>点击选择更多门店</option>");
                    app.stores1 = res.data;
                    $.each(app.stores1,function(key,value){
                        $("#district2").append("<option value='"+value.number+"'>"+value.number+"</option>");

                    })
                    //console.log(res.data);
                });
            } else {
                layer.msg( res.data );
                $("#district2").html("");
                $("#district2").append("<option>暂无门店选择</option>");
            }
        });
    }

    function see() {
        // console.log(1);
        var show = $('#goods_spec').css('display');
        if (show == 'block'){
            show = 'none';
            $('#goods_xq_a').html('展开')
        } else {
            show = 'block';
            $('#goods_xq_a').html('收起')
        }
        $('#goods_spec').css('display',show);
    }


</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '注册会员',
            user:{
                pick: false,
                stores_number:'', //门店中心编号
                referrer:'', //分享人
                area:'',
                name:'',
                phone:'',
                password:'',
                password_pay:'',
                province:'',
                city:'',
                district:'',
                address:'',
                stick:1, //冷敷贴
                liquid:1, //百草液
            },
			urls: 'window.location.href',
            goods: [],
            referrer:'',
            stores1:{},//搜索出的门店
            stores_name:'',
            user_city:'',
            status:0,
            // payTypesChecked:0,
            // payType:2,
            //商品规格名
            specsList :{},
            //商品规格名--值
            specsLists:{},
            goodsData:[],
            goodsId:'',
            goodsDetails:[]//选择商品详情
        },
        methods: {
            //获取url
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
            //初始化 系统管理员列表
            initialize: function () {
                var phone = this.obtain('phone');
                if(phone == undefined){
                    this.user.referrer = {{ Session::get('home_user')->phone }}
                } else {
                    this.user.referrer = phone
                }
                $.post("/home/superShop/goods",{'_token':'{{csrf_token()}}',class:'select',baodan:1},function (res) {
                    if (res.code) {
                        app.goods = res.data;
                        app.specsList = res.GoodsSpecsName;
                        app.specsLists = res.GoodsSpecsVal;
                        app.goodsData = res.goodsData;
                    } else {
                        // layer.msg(res.data);
                    }
                });
            },
            level:function (val) {
                app.user.goodsid = val.id
            },
            //检查报单中心
            // storesCase:function () {
            //     console.dir(app.user.stores_number);
            //     $.post("/home/member/deposit", {'_token': '{{csrf_token()}}',class:'storesCase',stores_number:app.user.stores_number}, function (res) {
            //         if (res.code) {
            //             app.stores_name = res.data.name
            //         } else {
            //             layer.msg(res.data);
            //             app.stores_name = ''
            //         }
            //     });
            // },
            //检查分享人
            upperCase:function () {
                if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.user.referrer))){
                    layer.msg('请输入正确的电话号码');
                    return false;
                }
                var users = {
                    'phone':app.user.referrer
                }
                $.post("/home/member/deposit", {'_token': '{{csrf_token()}}',class:'referrer',user:users}, function (res) {
                    if (res.code) {
                        app.referrer = res.data.user_name
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            adds:function ( specs, specslength, Checklength ) {
				var self = this;
                // if ( app.payTypesChecked == 1 ) {
                //     var goodsid = app.goods[0].id;
                // }
                //
                // /*上传时商品id改为17*/
                //
                // if ( app.payTypesChecked == 2 ) {
					
                var goodsid = app.goodsId;
                // console.log(goodsid);
                // }
                // if ( app.payTypesChecked == 0 ) {
                //     layer.msg('请选择报单商品类型');return false;
                // }
				
				var gidParm = app.getUrlParam('goodid');
				var specsParm = app.getUrlParam('specs');
				var types = app.getUrlParam('type');
				 
				console.log(gidParm+','+specsParm+','+types);
				
                if(app.status == 0){
                    app.status = 1;
                    layer.msg('注册中', {
                        icon: 16
                        ,time:50000
                        ,shade: 0.01
                    });
                    $.post("/home/member/doRegisterUser",{
                        '_token':'{{csrf_token()}}',
                        users:app.user,
                        goodsid: gidParm,
						type: types,
						goodid: gidParm,
                        // payType:app.payType,
                        // payTypesChecked:app.payTypesChecked,
                        specs: specsParm,
                        specslength: specslength,
                        Checklength: Checklength
                    },function (res) {
						console.log(res);
                        layer.closeAll('loading');
                        if (res.code) {
                            layer.msg(res.data,{time:500},function () {
                                window.location.href="/home/member/index";
                            });
                        } else {
                            app.status = 0;
                            layer.msg(res.data);
                        }
                    });
                } else {
                    layer.msg('注册中...');return;
                }
            },
            add:function () {
                var specs = '';
                var specsCheckData = [];
                // if ( app.payTypesChecked == 0 ) {
                //    layer.msg('请选择报单商品类型');return false;
                // }
                // if ( app.payTypesChecked == 2 ) {
                //     $(".specs-p").siblings('div').find("button").each(function(){
                //         if ( $(this).attr("checkSpecs") == 1 ) {
                //             specsCheckData.push( $(this).attr("checkSpecs") );
                //         }
                //     });
                //     if ( app.specsList.length != specsCheckData.length ) {
                //         layer.msg('请完整选择内衣报单产品的属性!');return false;
                //     }
                //     $(".clothes-div button").each(function(){
                //         if ( $(this).attr("checkSpecs") == 1 ) {
                //             var specsName = $(this).parents('.first-each-div').children('p').html();
                //             var specsVal = $(this).html();
                //             specs = specs+specsName+':'+specsVal+';';
                //         }
                //     });
                //
                //     if ( specs == '' ) {
                //         layer.msg('请选择报单产品属性');return false;
                //     }
                // }
				
                if(app.user.referrer == ''){
                    layer.msg('分享人电话不能为空');return;
                }
                if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.user.referrer))){
                    layer.msg('请输入正确的手机');return;
                }
                if(app.user.name == ''){
                    layer.msg('请选择姓名不能为空');return;
                }
                if(app.user.phone == '' ){
                    layer.msg('请输入正确的手机');return;
                }
                if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.user.phone))){
                    layer.msg('请输入正确的手机');return;
                }
                if(app.user.province == ''){
                    layer.msg('请选择省份');return;
                }
                if(app.user.city == ''){
                    layer.msg('请选择市区');return;
                }
                if(app.user.district == ''){
                    // layer.msg('请选择区县');return;
                }
                if(app.user.address == ''){
                    layer.msg('请输入详细地址');return;
                }
                if( app.user.pick == true && app.user.stores_number == "" ){
                    layer.msg("未绑定门店编号不能勾选自提!");
                    return false;
                }
                if ( app.user.stores_number != "" ) {
                    $.post("/home/stores/stores",{'_token':'{{csrf_token()}}',class:'lanLong',number:app.user.stores_number },function (res) {
                        if (res.code) {
                            findStoreInfo( res.data.latitude, specs, app.specsList.length, specsCheckData.length );
                        } else {
                            layer.msg(res.data);
                            return false;
                        }
                    });
                } else {
                    app.adds( specs, app.specsList.length, specsCheckData.length );
                }
            },
			getUrlParam:function (name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg);  //匹配目标参数
				if (r != null) return unescape(r[2]); return null; //返回参数值
			},
            //选择商品详情
            // selectOn:function (event){
            //     var val=event.target.value;
            //     app.goodsDetails=app.goodsData[val];
            //     if (val < 0){
            //         $("#stick_liquid_type").hide();
            //         $("#clothes_type").hide();
            //         $("#goods_xq").hide();
            //         $("#goods_spec").hide();
            //         return false;
            //     }else {
            //         $("#goods_xq").show();
            //     }
            //     if (app.goodsDetails.specs_val == 2) {
            //         $("#stick_liquid_type").hide();
            //         $("#clothes_type").show();
            //         // app.payTypesChecked = 2;
            //     }else {
            //         $("#stick_liquid_type").hide();
            //         $("#clothes_type").hide();
            //     }
            //     app.goodsId = app.goodsDetails.id
            //     console.log(app.goodsId);
            // },
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>

</html>
